<script setup lang="ts">
import { nextTick, onMounted } from 'vue';
import requests from '../util/fetchUtils';
import router from '../router';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;


var option: EChartsOption;

option = {
  tooltip: {
    show: true,
    trigger: "axis"
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      show: true,
      color: "rgba(255, 255, 255, 0.6)"
    },
    interval: 24 * 60 * 60 * 1000
  },
  grid: {
    containLabel: true,
    top: '8%',
    bottom: 0,
    left: 0,
    right: 5
  },
  yAxis: {
    type: 'value',
    min: 390,
    axisLabel: {
      show: true,
      color: "rgba(255, 255, 255, 0.6)"
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.08)"
      }
    }
  },
  series: [
    {
      data: [
        [new Date(2023, 8, 13), 390.5627],
        [new Date(2023, 8, 14), 390.6627],
        [new Date(2023, 8, 15), 390.7627],
        [new Date(2023, 8, 16), 390.6627],
        [new Date(2023, 8, 17), 390.6627],
        [new Date(2023, 8, 18), 390.7627],
        [new Date(2023, 8, 19), 390.8627],
        [new Date(2023, 8, 20), 390.9627],
        [new Date(2023, 8, 21), 390.5627]
      ],
      type: 'line'
    }
  ]
}

const sortFollowersDescending = (data: Array<any>) => {  
    return data.sort((a, b) =>  a.follower - b.follower);  
}  
const init = () => {
    var chartDom = document.getElementById('chart-main')!;
    console.log(chartDom);

    var myChart = echarts.init(chartDom);

     //请求数据
    let follower = requests<any>("/getWeekFollower/12")
    follower.then(data => {
        let result = data.map((item: { data_time: string | number | Date; follower: any }) => {
            let date = new Date(item.data_time)
            return [date, item.follower]
        })
        
        if (Array.isArray(option.series)) {
            option.series[0].data = result 
            
        }
        
        option.yAxis.min=sortFollowersDescending(data)[0].follower
        myChart.setOption(option)
    })

    window.onresize = function () {
        myChart.resize()
    }
    
}


const fansRank = (id: number) => {
  console.log(id)

  // 并且携带ID
  router.push({
    path: "/fans",
    query: {
      id: id
    }
  })
}

const totalFans = (id: number) => {
  console.log(id)

  // 并且携带店铺ID
  router.push({
    path: "/tfans",
    query: {
      id: id
    }
  })
}

// 等待HTML渲染后获取对象
onMounted(() => {
    nextTick(() => {
        init()
    })
})
</script>
<template>
    <div class="index">
        <div class="container top">
            <img class="myzone" src="../assets/img/ico_ico_home_myzone.png" alt="" srcset="">
            <div class="title">
                全部站点数据
                <img src="../assets/img/ico_ico_home_add.png" alt="" srcset="">
            </div>
            <img class="site" src="../assets/img/ico_ico_home_site.png" alt="" srcset="">
        </div>
        <div class="container">
            <div class="navigation">
                <div class="item"  @click="fansRank(1)">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item" @click="totalFans(1)">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
            </div>
            <div class="navigation">
                <div class="item"  @click="fansRank(1)">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
            </div>
            <div class="navigation">
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
            </div>
            <div class="navigation">
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>
                <div class="item">
                    <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
                    <div class="text">粉丝排名</div>
                </div>

            </div>

        </div>

        <div class="img-title">
            <div class="text">粉丝变化情况</div>
        </div>

        <div class="container">
            <div class="fans-condition">
                <div class="text-button">
                    <div class="item active">涨粉最快</div>
                    <div class="item">跌粉最快</div>
                </div>
                <div class="up-box">
                    <img class="face" src="https://i1.hdslb.com/bfs/face/ae16880a3ccba26a2461a04b31ab7f98061cc576.jpg"
                        referrerPolicy="no-referrer" crossorigin="anonymous" alt="">
                    <div class="up-name">★⑥檤轮囬★</div>
                </div>
                <div id="chart-main" style="width: 9.4667rem;height:4.2667rem; margin: 0 auto;">

                </div>
                <div class="date-nav">
                    <div class="item active">近7天</div>
                    <div class="item">近15天</div>
                    <div class="item">近1个月</div>
                    <div class="item">近3个月</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
@import url(../assets/css/base.less);

.index {
    width: 10rem;
    margin: 0 auto;

    // 顶部区域
    .top {
        display: flex;
        align-items: center;
        padding-bottom: .5333rem;

        img {
            display: block;
            width: .8rem;
            height: .8rem;
        }

        .myzone {
            margin-left: .5333rem;
        }

        .title {
            width: 6.9333rem;
            height: 1.1733rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: @heading-color;
            font-size: .48rem;
            background-image: url(../assets/img/img_titlebar_home.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;

            img {
                margin-left: 1.1467rem;
                margin-right: .1067rem;
            }
        }

        .site {
            margin-left: .1867rem;
        }

    }

    //图标导航区
    .navigation {
        display: flex;
        width: 8.7733rem;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: .5333rem;

        .item {
            width: 1.28rem;
            display: flex;
            flex-direction: column;
            align-items: center;

            .icon {
                display: block;
                width: 1.2rem;
                height: 1.2rem;
            }

            .text {
                font-size: .32rem;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                margin-top: .2133rem;
            }

            &:not(:first-child) {
                margin-left: .5867rem;
            }
        }


    }

    // 粉丝变化
    .img-title {
        width: 10rem;
        height: 1.0667rem;
        background: url(../assets/img/img_title_normal.png) no-repeat;
        background-size: contain;
        margin-top: .2667rem;

        .text {
            font-size: .3733rem;
            color: white;
            margin-left: .7467rem;
            height: 1.0667rem;
            line-height: 1.0667rem;
        }
    }

    .text-button {
        display: flex;
        margin-left: .2667rem;
        padding-top: .5333rem;

        .item {
            width: 1.7067rem;
            height: .64rem;
            background: linear-gradient(135deg, rgba(0, 36, 72, 1) 0.01%, rgba(13, 73, 133, 1) 50.37%, rgba(0, 36, 72, 1) 100%);
            box-shadow: inset 0px -0.0133rem 0px rgba(75, 194, 255, 0.5), inset 0px .0133rem 0px rgba(75, 194, 255, 0.5), inset -0.0133rem 0px 0px rgba(75, 194, 255, 0.5), inset 0px 0px .16rem rgba(255, 255, 255, 0.6);
            /** 文本1 */
            font-size: .32rem;
            line-height: .64rem;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;

            &.active {
                background: linear-gradient(135deg, rgba(15, 99, 184, 1) 0.01%, rgba(27, 160, 228, 1) 50.37%, rgba(15, 99, 184, 1) 100%);
                box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.8);
            }
        }
    }

    .up-box {
        display: flex;
        margin-left: .5333rem;
        margin-top: .2667rem;
        margin-bottom: .2667rem;

        .face {
            display: block;
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            border: 0.5px solid @heading-color;
            margin-right: .2667rem;
        }

        .up-name {
            font-size: .4267rem;
            line-height: .8rem;
            text-align: center;
        }
    }

    .date-nav {
        display: flex;
        margin-top: .5333rem;
        padding-bottom: .6133rem;
        justify-content: center;

        .item {
            font-size: .32rem;
            height: .64rem;
            background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(22, 41, 86, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
            border: .0133rem solid rgba(75, 194, 255, 0.2);
            box-shadow: inset 0px 0px .16rem rgba(75, 194, 255, 0.3);
            line-height: .64rem;
            padding-left: .2667rem;
            padding-right: .2667rem;

            &:not(:last-child) {
                margin-right: .5333rem;
            }

            &.active {
                background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(37, 68, 137, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
                border: .0133rem solid rgba(75, 194, 255, 0.6);
            }
        }
    }

}
</style>